<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-bind是vue提供的绑定dom属性的命令，强制绑定数据 -->
      <!-- 使用v-bind指令时，不用插值语法，直接在标签属性的引号中写vm实例对象的属性名就能读取对应数据 -->
      <p v-bind:ccc="name">新增属性</p>
      <!-- 简写方式 -->
      <img :src="imgsrc" alt="" />

      <!-- 路径拼接的两种写法 -->
      <img :src="publicUrl+'logo.svg'" alt="" />
      <img :src="`${publicUrl}logo.svg`" alt="" />
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            name: 'lili',
            mes: {
              tall: 166,
              sex: 'nan',
            },
            like: ['打游戏', '看电视'],
            imgsrc: '../../Snipaste_2022-11-01_13-02-46.jpg',
            publicUrl: 'https://v2.cn.vuejs.org/images/',
          };
        },
      });
    </script>
  </body>
</html>
